<template>

  <div style="width:100%;height:100%;position:relative">
    <translate-group :lengths="titleInfor.length" style="width: 100%;height:100%;" @scrollBottom="loadingMoreDate">

        <div style="width: 100%;">
          <!--分类广告-->
          <div class="extension" style="width:100%;">
            <img src="static/image/demo1.png"/>
            <em>共39件</em>
            <!--显示分类商品件数-->
          </div>
          <!--分类广告 end-->
          <!--优惠券领取-->
          <banner tabClassName="coupon_collection">
            <ul id="scroller" class="scroller_list coupon_collectio">
              <discount-list :discountInfor="{}" v-for="(item, index) in 10" :key="'discount-list' + index">
                <commodity-promotion></commodity-promotion>
              </discount-list>
            </ul>
          </banner>
          <!--优惠券领取 end-->
          <!--商品列表-->
          <div class="aui-content aui-margin-b-15">
            <ul class="aui-list aui-media-list promotion_list">
              <li is="CommodityPromotion" v-for="(item, index) in activeIndex*3+5" :key="'CommodityPromotion' + index"></li>
            </ul>
          </div>
          <!--商品列表 end-->
          <!--<page-foot></page-foot>-->
          <div v-if="isfalse">正在加载</div>

        </div>

        <!--<div>正在加载...</div>-->

    </translate-group>
  </div>

</template>

<script>
  import Banner from "@/real-components/BannerScroll"
  import CommodityPromotion from "@/real-components/CommodityPromotion"
  import TranslateGroup from "@/real-components/TranslateTest"
  import PageFoot from "@/real-components/PageFoot"
  import DiscountList from "@/real-components/DiscountList"
//  import queryClassBanner from "../../utils/queryClassBanner"

  import axios from "axios"
  import Bscroll from "better-scroll"
  import {showLoading, hideLoading} from "../../utils/loading";
  import {translateDetailData} from "../../utils/TranslateDetailDate"
  export default {
    data () {
      return {
        isfalse: false,
        isloading: false
      }
    },

    components: {
      Banner,//优惠券左右滑动组件
      CommodityPromotion,//优惠商品展示组件
      TranslateGroup, //左右滑动组件
      DiscountList, // 优惠券展示组件
      PageFoot // 页脚
    },
    props: {
      //传递分类名称的参数
      titleInfor: {
        type: Array,
        default: [
          {
            goodsClassId: 0,
            goodsClassName: "品牌大促"
          },
          {
            goodsClassId: 1,
            goodsClassName: "值得买"
          },
          {
            goodsClassId: 2,
            goodsClassName: "超值进口"
          },
          {
            goodsClassId: 3,
            goodsClassName: "热评"
          }
        ]
      },
      discountList: {
        type: Array,
        default: () => {
          return [{
            isReceived: false,
            allPrice: parseInt(100),
            offPrice: parseInt(6)
          },
            {
              isReceived: false,
              allPrice: parseInt(100),
              offPrice: parseInt(5)
            }
          ]
        }
      },
      number: {
        type: Number,
        default: 5
      }
    },
    methods: {
      //加载更多数据
      loadingMoreDate () {
console.log('0000000000')
      },

    },

    watch: {
      activeIndex () {
//        this.createdBanner()
        console.log("============", this.Bscroll)
        this.$nextTick( () => {
        })

      }
    },

    computed: {
      //冲vuex获取当前的页面index
      activeIndex () {
        return this.$store.state.cjy.classifyIndex
      }
    },

    mounted () {
      this.$nextTick(() => {

      })

    },


  }
</script>

<style>
  .goleft-enter-active, .goleft-leave-active, .goright-enter-active, .goright-leave-active {
    transition: all 0.5s;
  }

  .goleft-enter, .goright-leave-to {
    transform: translatex(100%);
    opacity: 0.8
  }

  .goleft-leave-to, .goright-enter {
    transform: translatex(-100%);
    opacity: 0.8
  }

  .coupon_collection {
    width: auto;
    height: 3.8rem;
  }
</style>
